<template>
    <div class=''>
        <!-- vue组件  为了拆分vue实例的代码量去，以不同的组件划分不同的模块和功能，可以让我们需要什么功能就去调用什么组件 -->
        <!-- 组件化就是页面样式的复用，是从UI界面划分的 -->
        <!-- 模块化 是从代码逻辑角度划分的 -->

        <!-- <sonView></sonView> -->

        <!-- 通过v-if和v-else结合，可以切换当前页面所展示组件 -->
        <!-- <button @click="flag = !flag">toggle</button>
        <sonView v-if="flag"></sonView>
        <sonView2 v-else></sonView2> -->
        <!-- 通过 :is属性来切换不同的组件，并且添加动画 -->
        <button @click="login">登录</button>
        <button @click="reset">注册</button>
        <transition mode="out-in">
            <component :is="comName"></component>
        </transition>
        <!-- 父子传参 
        props 
        -->
        <!-- 子父传参
        emit 
        -->
        <sonView :msg="msg" :msg1="msg1" />
        <!-- 自定义事件 -->
        <sonView2 @getData="getData" />
        {{ childData }}
        <button @click="goAbout">跳转</button>
        <router-link to="/about">跳转</router-link>
    </div>
</template>

<script>
import sonView from '@/components/sonView.vue';
import sonView2 from '@/components/sonView2.vue';
export default {
    data() {
        return {
            flag: true,
            comName: "sonView",
            msg: "我是要传给子组件的数据",
            msg1: "我是要传给子组件的数据1",
            childData: {}
        };
    },
    components: {
        sonView,
        sonView2
    },
    created() {

    },
    mounted() {

    },
    methods: {
        login() {
            this.comName = "sonView"
        },
        reset() {
            this.comName = "sonView2"

        },
        getData(data) {
            this.childData = data
        },
        goAbout() {

            // 跳转传参一共有两种方式 
            // path搭配query这种会在地址栏展示传递的内容，适合不重要的信息传递
            // params搭配name，不会在地址栏展示，适合传递重要信息
            // 路由跳转
            // this.$router.push("/about")
            // 跳转时删除当前路径，直接去到新的页面
            // this.$router.replace("/about")
            // this.$router.push({
            //     path: "/hot",
            //     query: {
            //         name: "ls",
            //         age: 18
            //     }
            // })

            this.$router.push({
                name: "hot",
                params: {
                    name: "ls",
                    age: 18
                }
            })

        }
    },
};
</script>

<style lang='scss' scoped>
.v-enter,
.v-leave-to {
    opacity: 0;
    transform: translate(30px);
}

.v-enter-active,
.v-leave-active {
    position: absolute;
    transition: all 0.3s ease;
}
</style>